<template>
  <div>
    <h3 v-money="money">App</h3>
    <p v-my-text="'测试文字'"></p>
    <p v-my-show="123">测试myShow</p>
    <p v-my-show="b1">测试myShow123</p>
    <p v-my-show="b1">测试myShow</p>
    <p>{{'123456789' | qie}}</p>
    <p>{{aaa}}</p>
  </div>
</template>

<script>
/***
 *  1. 指令函数在 directives 配置项中定义
 *  2. 什么时候调用？ 在模板中用v-xxx调用
 *  3. 参数：
 *     (1) 指令绑定的元素节点
 *     (2) 绑定的信息对象 value
 *     (3) 从第三个参数开始，都是虚拟dom节点
 *  4. 返回值：没有实际意义
 *  5. this 指向 undefined
 *  
 * 
 */
export default {
  name: 'App',
  data(){
    return {
        money:100,
        b1:false
    }
  },
  directives: {
    // money(element,banding){
    //     console.log('指令money run')
    //     console.log('element: ', element)
    //     console.log('banding: ', banding)
    //     // console.log('c: ', c)
    //     // console.log('d: ', d)
    // }
    // 自定义指令：功能让绑定元素的文字变红，并且让绑定的值翻10000倍
    money(element,{value}){
        if(typeof value !== 'number'){
            // console.error('value必须是数字')
            // return ;
            throw new Error('value 必须是数字')
        }
        element.style.color = 'red'
        element.innerHTML = value * 10000
        // 返回值没有用
        console.log('v-money this: ', this)
    }
  }
}
</script>

<style>
</style>